<template>
	<view class="container">
		<view class="hint">
			说明：
			<view>
				已有一卡通用户，可将原一卡通作为牛奶卡进行绑定，绑定完成后在智初小交进行充值，即可在自助售奶机终端消费
			</view>
		</view>
		<view class="band_milk_card">
			<!-- <view class="agreement">
				<label @click="agreementChange" class="radio">
					<radio :checked="agreement" color="#185AFF" style="transform: scale(0.68);" /><text class="txt1">我已阅读并同意《牛奶卡绑定协议》</text>
				</label>
			</view> -->
			<view class="btn_box">
				<button type="primary" class="btn_pri" @click="toBind">牛奶卡绑定</button>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				agreement: true
			};
		},
		mounted() {
			_this = this
		},
		methods:{
			agreementChange(){
				console.log(_this.agreement)
				_this.agreement = !_this.agreement
			},
			toBind(){
				if( !_this.agreement ){
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意《牛奶卡绑定协议》'
					})
					return;
				}
				uni.navigateTo({
					url: '../bindCard/bind'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		height: 100vh;
		box-sizing: border-box;
		padding: 0 24upx;
		// padding-bottom: ;
	}
	.hint{
		padding: 64upx 0;
		color: #999;
	}
	.band_milk_card{
		position: absolute;
		bottom: 30rpx;
		left: 0;
		width: 100%;
	}
	.agreement{
		padding: 24upx 0 ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn_box {
		display: flex;
		justify-content: center;
		align-items: center;
		.btn_pri {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			width: 90%;
			font-size: 32rpx;
			font-family: "PingFangSC-Heavy, PingFang SC";
			font-weight: 600;
			color: #FFFFFF;
			background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
			box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
			border-radius: 8rpx;
		}
	}
</style>
